@use "./theme-config.scss" as themeConfig;

/*
 * 设置对应主题的样式
 * $property: css样式，如color，background-color，border-color，font-size等
 * $styleKey: 对应主题中的样式键，如main-theme-color、font-default-color
 */
@mixin set_theme_style($property, $styleKey) {
  @each $themename, $theme in themeConfig.$themes {
    [data-theme='#{$themename}'] & {
      #{$property}: map-get($map: $theme, $key: $styleKey);
    }
  }
}

/*
 * 设置对应颜色的激活颜色，将当前的颜色值*0.9，颜色会加深，以标记加深颜色
 * $property: css样式，如color，background-color，border-color等，只能是颜色属性，其他属性将无法生效；
 * $styleKey: 对应主题中的样式键，如main-theme-color、font-default-color
 */
@mixin set_hover_color($property, $styleKey) {
  @each $themename, $theme in themeConfig.$themes {
    [data-theme='#{$themename}'] & {
      #{$property}: darken(map-get($map: $theme, $key: $styleKey), 5%);
    }
  }
}

/*
 * 设置对应颜色的激活颜色，将当前的颜色值*0.9，颜色会加深，以标记加深颜色
 * $property: css样式，如color，background-color，border-color等，只能是颜色属性，其他属性将无法生效；
 * $styleKey: 对应主题中的样式键，如main-theme-color、font-default-color
 */
@mixin set_active_color($property, $styleKey) {
  @each $themename, $theme in themeConfig.$themes {
    [data-theme='#{$themename}'] & {
      #{$property}: darken(map-get($map: $theme, $key: $styleKey), 10%);
    }
  }
}

/*
 * 设置动画效果，系统中所有动画效果时长统一
 * $property: 动画效果，如all, opacity等
 */
@mixin set_animation($property) {
  transition: $property 0.2s;
}

/*
 * 强制设置淡化背景色属性
 */
@mixin set_theme_style_light_important($property, $styleKey, $value, $opacity) {
  @each $themename, $theme in themeConfig.$themes {
    [data-theme='#{$themename}'] & {
      #{$property}: rgba(lighten(map-get($map: $theme, $key: $styleKey), $value), $opacity);
    }
  }
}

/*
 * 强制设置淡化背景色属性
 */
@mixin set_theme_style_opacity_important($property, $styleKey, $opacity) {
  @each $themename, $theme in themeConfig.$themes {
    [data-theme='#{$themename}'] & {
      #{$property}: rgba(map-get($map: $theme, $key: $styleKey), $opacity);
    }
  }
}